<template>
  <div class="add border-bottom">
     <div class="addLeft">购买数量</div>
     <div class="addRight">
       <ul>
         <li @click="reduce">-</li>
         <li>{{this.num}}</li>
         <li @click="add">+</li>
       </ul>
     </div>
  </div>

</template>

<script>
  export default {
    name: 'ShopAdd',
    data () {
      return {
        num : 1
      }
    },
    methods: {
      add () {
        this.num = this.num+1;
        this.$emit("add",this.num)
      },
      reduce () {
        this.num = this.num-1;
          if(this.num<=1){
            this.num = 1;
          }
        this.$emit("reduce",this.num)
      }
    }

  }
</script>

<style  scoped>
  .add {
    margin-top: 5px;
    width: 100%;
    height: 50px;
  }
  .addLeft {
    float: left;
    margin-left: 5px;
    line-height:50px;
  }
  .addRight {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
  }
  .addRight ul {
    list-style: none;
  }
  .addRight ul li {
    float: left;
    width: 40px;
    height: 40px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    text-align: center;
    line-height:40px;
  }
  .addRight ul li:first-child {
    background-color: yellowgreen;
  }
  .addRight ul li:last-child {
    background-color: yellowgreen;
  }
</style>





